<template>
	<div class="register-content">

        <div class="important-info">
            <p class="title">重要信息，用于登录，请谨记！</p>
            <ul class="content">
                <li><span>账号：</span><span>{{opctions.number}}</span></li>
                <li><span>密码：</span><span>{{opctions.Tpassword}}</span></li>
                <li><span>手机：</span><span>{{opctions.telphone}}</span></li>
            </ul>
        </div>

        <div class="role-info">
            <p class="title">角色信息</p>
            <ul class="content" v-if="this.opctions.role_id.includes(6)">
                <li><span>角色：</span><span>教师</span></li>
                <li><span>性别：</span><span>{{opctions.sex === 1 ? '男' : '女'}}</span></li>
                <li><span>班级：</span><span  v-for="(className,inx) of classData" :key="inx">{{className}}&nbsp;&nbsp;</span></li>
                <li v-if="!onlyParent"><span>任教科目：</span><span>{{otherOpctions.teachClass ? otherOpctions.teachClass : '未选择任教科目'}}</span></li>
                <li v-if="!isSchool"><span>学校：</span><span>{{otherOpctions.schoolName}}</span></li>
            </ul>
            <ul class="content" v-if="this.opctions.role_id.includes(4)">
                <li><span>角色：</span><span>学生</span></li>
                <li><span>性别：</span><span>{{opctions.sex === 1 ? '男' : '女'}}</span></li>
                <li><span>班级：</span><span  v-for="(className,inx) of classData" :key="inx">{{className}}&nbsp;&nbsp;</span></li>
                <li v-if="!isSchool"><span>学校：</span><span>{{otherOpctions.schoolName}}</span></li>
            </ul>
            <ul class="content" v-if="this.opctions.role_id.includes(5)">
                <li><span>角色：</span><span>家长</span></li>
                <!-- <li><span>学校：</span><span>{{siteTitle}}</span></li> -->
                 <li v-if="!isSchool"><span>学校：</span><span>{{otherOpctions.schoolName}}</span></li>
                <li><span>性别：</span><span>{{opctions.sex === 1 ? '男' : '女'}}</span></li>
                <li><span>子女：</span><span v-for="child of opctions.childrens" :key="child.inx">{{child.name}}&nbsp;&nbsp;</span></li>
                <li><span>子女班级：</span><span v-for="child of opctions.childrens" :key="child.inx">{{child.class_name}}&nbsp;&nbsp;</span></li>
            </ul>
        </div>        

	</div>
</template>

<script>

export default {
    props:{
        opctions:{
            require:true,
            type: Object,
            default() {
                return {};
            }
        },
        otherOpctions:{
            require:false,
            type: Object,
            default() {
                return {};
            }
        }
    },
	data() {
		return {
		};
	},
	created() {
	},
	mounted () {
        console.log(this.opctions.inviteCodes)
        console.log(this.opctions.childrens)
	},
	watch: {

    },
    computed: {
        isSchool(){
            return this.$store.getters.isSchool;
        },
        isParent(){
            return this.opctions.role_id.includes(5)
        },
        hasClass(){
           return this.opctions.role_id.includes(6) || this.opctions.role_id.includes(4);
        },
        onlyParent(){
            return this.opctions.role_id.length === 1 && this.opctions.role_id[0] === 5
        },
        classData(){
            let classes = [];
            if(this.opctions.invite === 1){
               this.opctions.inviteCodes.map(x => {
                    classes.push(x.class.name);
                })
            }else{
                const cascader = this.$parent.$parent.$refs.classCascader;//获取register-form.vue组件里面的班级联级选择器
                // 对于班级，学生是单选，教师是多选；此处获取联级选择器的label，查看源码，多选和单选分别在this.$refs.cascader名字.presentTags,this.$refs.cascader名字.inputValue
                if(this.opctions.role_id.includes(4)){//学生
                    classes.push(cascader.inputValue)
                }else{  //教师
                    cascader.presentTags.map(x => {
                        classes.push(x.text);
                    })
                }
            }
            return classes;
        },
        siteTitle(){
            return sessionStorage.getItem('siteTitle')
        }
    },
	methods: {

	}
};
</script>
<style lang="scss">
.register-content{
    .title{
        line-height: 16px;
    }
    .content{
        padding: 10px 15px;
        margin: 15px 0 10px;
        background: #f6f6f6;
        li{
            line-height: 30px;
            text-align: left;
            span:first-child{
                display: inline-block;
                min-width: 60px;
            }
        }
    }   
}
.important-info{
    .title{
        color: #e29300;
    }
}
.role-info{
    .title{
        color: #666;
    }
}
</style>
